<template>
    <div class="part">
        <template v-if="props.title" >
            <div @click="toggleCollapsed" style="text-align: center;background-color: rgba(128, 128, 128, 0.15);">{{ props.part.title }}</div>
        </template>
        <template v-if="!collapsed">

            <template v-if="props.part.type == 'list'">
            <v-select v-model="listIndex" :items="listNames" hide-details density='compact' transition="none">
            </v-select>
        </template>
        <template v-for="bar in props.part.bars">
            <template v-if="bar.type == 'addable'">
                <DefaultBar :id v-for="index of (cardKeyLength(props.card, bar.keys, baseIndex)) + 1"
                    :index="[...baseIndex, index - 1]" :card="props.card" :bar="bar">

                </DefaultBar>
            </template>
            <template v-else>
                <DefaultBar :id :card="props.card" :index="[...baseIndex]" :bar="bar">
                </DefaultBar>
            </template>

        </template>
        </template>
        <div style="background-color: grey;height: 3px;" ></div>
    </div>
</template>

<script setup lang="ts">
import CardClass, { cardGet, cardKeyLength } from '@/ts/cardData/card';
import part from '@/ts/cardType/part';
import DefaultBar from '../bar/DefaultBar.vue';
import { computed, ref } from 'vue';
const props = defineProps<{
    id:string,
    card: CardClass,
    part: part,
    title?: boolean,
    collapsible?:boolean
}
>()

const listIndex = ref(0)
const listLength = computed(() => {
    if (props.part.type !== 'list') return 1
    return cardKeyLength(props.card, [props.part.listOrder ?? ''], [])
})
const listNames = computed(() => {
    if (props.part.type !== 'list') return []
    let names = []
    let i = 0
    for (; i < listLength.value; i++) {
        names.push({
            title: cardGet(props.card, props.part.listOrder ?? '', [i]),
            value: i
        })
    }
    names.push({ title: "新建", value: i })
    return names
})
const baseIndex = computed(() => {
    let index: number[] = []
    if (props.part.type == 'list') index.push(listIndex.value)
    return index
})
const collapsed =ref (false)

function toggleCollapsed(){
    collapsed.value=!collapsed.value
}
</script>

<style scoped>
.part {
    border-top: 3px solid grey;
    border-left: 3px solid grey;
    border-right: 3px solid grey;
}
</style>